<template>
	<view class="">
		<view class="beijingtu" v-show="isshow">
			<image class="beijingimg"
				src="https://taoxichuan-bucket.oss-cn-shenzhen.aliyuncs.com/uploads/20240617/19ae38fd9c05e6b9aaf58bd504fa8d0d.png"
				mode=""></image>
			<view class="text" @click="openindex">
				跳过{{count}}
			</view>
		</view>
		<uni-nav-bar v-if="!isshow" title="陶溪川" :statusBar='true' :border="false"></uni-nav-bar>
		<view class="index" v-if="noload">
		<!-- 	<view class="" @click="getcode">
				code：
				<view class="" @click.stop="copyFun(code)">
					{{code}}
				</view>
			</view>
			<view class="" @click="zhifu">
				支付
			</view> -->
			<!-- //轮播图 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :circular="true">
				<swiper-item class="swiper-item" v-for="v in bannerList" :key="v.id">
					<image lazy-load :src="httpimg+v.image" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- //标签 -->
			<view class="lists">
				<view class="list" v-for="(item,index) in typeList" :key="index" @click="toClass(item)">
					<image :src="httpimg+item.home_image" mode=""></image>
					<view class="list_text">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="notice_img">
					<image src="/static/index/gonggao.png" mode=""></image>
				</view>
				<swiper :indicator-dots="false" :autoplay="true" :interval="5000" :duration="2000" :circular="true"
					:disable-touch="true" :vertical="true" class="notice_center">
					<swiper-item v-for="v in noticeList" :key="v.id" @click="toLook(v)">
						{{v.title}}
					</swiper-item>
				</swiper>
			</view>
			<view class="must">
				<view class="title">
					<view class="title_l">
						<image src="/static/index/i2.png" mode=""></image>
					</view>
					<view class="title_r" @click="toMore">
						查看更多
						<uni-icons type="right" color="#AAAAAA"></uni-icons>
					</view>
				</view>
				<scroll-view class="must_scroll" :scroll-x="false" style="width: 100%;">
					<view class="must_l" v-for="(item,index) in mustList" :key="index" @click="toDetail(item)">
						<view class="l_img">
							<image :src="httpimg+item.image" mode="aspectFill"></image>
						</view>
						<view class="l_text">
							<view class="l_text_t">
								{{item.title}}
							</view>
							<view class="l_text_c">
								<text v-for="(z,y) in item.labelList" :key="y">
									{{z.name}}

								</text>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<view class="musts">
				<view class="title">
					<view class="title_l">
						<image src="/static/index/i1.png" mode=""></image>
					</view>
					<view class="title_r">
						人生尽兴，能走多远，就走多远!
					</view>
				</view>
				<view class="content">
					<view class="content_tit">
						<view :class="activetype ==index?'active':'content_x'" v-for="(item,index) in typeList"
							:key="index" @click="changeType(item,index)">
							{{item.name}}
						</view>
					</view>
					<scroll-view :scroll-y="true" style="height: 98vh;" @scrolltolower='Bottoms'>
						<view class="" v-for="(item,index) in hostList" :key="index" @click="toDetail(item)">
							<view class="flex_item">
								<image :lazy-load='true' class="imgs" :src="httpimg+item.image" mode=""></image>
								<view class="ads">
									<view class="ads_l">
										<view class="tit">{{item.title}}</view>
										<view class="label_flex">
											<view class="label" v-for="z in item.labelList" :key="z">
												{{z.name}}
											</view>
										</view>
									</view>
									<view class="btn">
										￥{{item.price}}
									</view>
								</view>
							</view>
						</view>
						<uni-load-more v-if="!hostList.length <= 0" :status="statusshow"></uni-load-more>
						<kong v-if="hostList.length <= 0"></kong>
					</scroll-view>

				</view>
			</view>
			<view class="" style="height: 60rpx;">

			</view>
		</view>
		<uv-tabbar :value="0" class="tab"></uv-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				noload:false,
				httpimg: this.$httpimg,
				type: 1,
				bannerList: [],
				mustList: [],
				hostList: [],
				noticeList: [],
				detail: {
					id: '',
					type: ''
				},
				typeList: [],
				params: {
					sign: '111',
					page: 1,
					limit: 5,
					cate_id: 0,
					is_hot: 1
				},
				pageInfo: {},
				activetype: 0, //热门推荐分类
				statusshow: 'loading',
				img: '',
				count: 10,
				timer: null,
				code:''
			}
		},
		onShareAppMessage(res) {
			return {
				title: '陶溪川欢迎你！',
				path: `/pages/index/index`,
			}
		},
		onShareTimeline(res) {
			return {
				title: '陶溪川欢迎你！',
				path: `/pages/index/index`,
			}
		},
		onLoad(o) {
			this.countDown()
			// this.img = uni.getStorageSync('img')
			if (!uni.getStorageSync('user')) {
				wx.login({
					provider: 'weixin',
					success: (res) => {
						this.$post('index/login', {
							code: res.code
						}).then(r => {
							if (r.code == 0) {
								uni.setStorageSync('user', {
									id: r.data.id,
									session_key: r.data.session_key
								})
								this.$post('user/index', {
									mid: r.data.id
								}).then(res => {
									if (res.code == 0) {
										uni.setStorageSync('msg', res.data)
									}
								})
							}
						})
					}
				})
			}

			//轮播图
			this.$post('home/banner').then(res => {
				if (res.code == 0) {
					this.bannerList = res.data
				}
			})
			//公告
			this.$post('home/notice').then(res => {
				if (res.code == 0) {
					this.noticeList = res.data
				}
			})
			//分类
			this.$post('home/cate', {
				pid: 0,
				type: 1
			}).then(res => {
				if (res.code == 0) {
					this.typeList = res.data
					this.params.cate_id = res.data[0].id
					this.gettickList()
				}
			})
			this.$post('home/cate', {
				pid: 0,
				type: 2
			}).then(res => {
				if (res.code == 0) {
					this.pageInfo = res.data[0]
					
					uni.setStorageSync('titname', res.data[0].name)
					this.$post('tickets/ticketList', {
						page: 1,
						limit: 3,
						cate_id: 8,
						is_hot: 1
					}).then(res => {
						if (res.code == 0) {
							this.mustList = res.data.list
						}
					})
				}
			})
		},
		onUnload() {
			clearInterval(this.timer);
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			zhifu(){
				uni.request({
					url:'https://xcx.txcgl.cn/api/lakala_demo/index1',
					method: "POST",
					success:res=>{
						let data = res.data.data.acc_resp_fields
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.time_stamp,
							nonceStr: data.nonce_str,
							package: data.package,
							signType: data.sign_type,
							paySign: data.pay_sign,
							success: (res) => {
								console.log(res);
								uni.hideLoading()
							},
							fail: (err) => {
								console.log(err);
								uni.hideLoading()
								uni.showToast({
									title: '取消支付',
									icon: 'none'
								})
							}
						});
					}
				})
			},
			copyFun(data){
				uni.setClipboardData({
					data, // 要复制的内容
					success: () => { // 复制成功回调
						console.log('11');
						uni.showToast({
							title: '已复制',
							icon: 'success'
						})
					}
				});
			},
			getcode(){
				let that = this
				wx.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res.code);
						that.code = res.code
					}
				})
			},
			openindex(){
				this.isshow = false
				clearInterval(this.timer);
			},
			countDown() {
				let _this = this;
				const TIME_COUNT = 10;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
							this.noload = true
						} else {
							clearInterval(this.timer);
							this.timer = null;
							this.isshow = false
							// uni.showTabBar()
						}
					}, 1000);
				}
			},
			changeType(item, index) {
				this.activetype = index
				this.params.page = 1
				this.params.limit = 5
				this.params.cate_id = item.id
				this.hostList = []
				this.gettickList()
			},
			// //触底加载
			Bottoms() {
				this.params.page++
				this.gettickList()
			},
			gettickList() {
				this.statusshow = 'loading'
				this.$post('tickets/ticketList', this.params).then(res => {
					if (res.code == 0) {
						this.hostList.push(...res.data.list)
						this.statusshow = 'no-more'
					}
				})
			},
			toClass(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/index/finds?id=${item.id}&name=${item.name}`
				})
			},
			toLook(e) {
				uni.navigateTo({
					url: 'notice?id=' + e.id
				})
			},
			toDetail(e) {
				uni.navigateTo({
					url: 'details?id=' + e.id + '&type=1'
				})
			},
			toMore() {
				// this.typeList
				console.log(this.typeList);
				uni.navigateTo({
					url: `/pages/index/finds?id=8&name=门票`
				})
			},
		}
	}
</script>

<style lang="scss">
	.beijingtu {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9999;

		.beijingimg {
			width: 100%;
			height: 100%;
		}
	}

	.text {
		width: 120rpx;
		position: absolute;
		bottom: 10%;
		right: 30rpx;
		border: 1px solid #fff;
		padding: 10rpx;
		font-size: 26rpx;
		color: #fff;
		border-radius: 30rpx;
		text-align: center;
	}

	.index ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.index {
		height: 100vh;
		overflow-x: auto;

		.swiper {
			width: 690rpx;
			margin: 18rpx auto;
			height: 388rpx;
			border-radius: 20rpx;

			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}

		/* #ifdef MP-WEIXIN */
		// 默认指示点样式
		wx-swiper .wx-swiper-dot {
			position: relative;
			background-color: #ffffff;
			width: 28rpx;
			border-radius: 10rpx;
			height: 8rpx;
			opacity: 0.4;
		}

		// 当前选中样式
		wx-swiper .wx-swiper-dot-active {
			background-color: #ffffff;
			width: 48rpx;
			border-radius: 10rpx;
			opacity: 10;
		}

		/* #endif */
		::v-deep uni-swiper .uni-swiper-dot {
			position: relative;
			bottom: 34rpx;
			background-color: #ffffff;
			width: 12rpx;
			height: 10rpx;
			opacity: 0.4;
		}

		::v-deep uni-swiper .uni-swiper-dot-active {
			background-color: #ffffff;
			width: 24rpx;
			border-radius: 10rpx;
			opacity: 10;
		}

		.box {
			width: 100%;
			height: 20rpx;
			opacity: 1;
			background: #f5f5f5;
		}

		.lists {
			width: 690rpx;
			margin: 30rpx auto;
			display: flex;
			flex-flow: column wrap;
			list-style-type: none;
			overflow-x: scroll;
			justify-content: space-between;
			height: 250rpx;

			.list {
				width: 140rpx;
				text-align: center;
				margin: 0rpx 16rpx;

				image {
					width: 68rpx;
					height: 68rpx;
				}

				.list_text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		.notice {
			width: 690rpx;
			height: 100rpx;
			background: #FFF8F3;
			border-radius: 10rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 32rpx 30rpx;

			.notice_img {
				width: 36rpx;
				height: 36rpx;
				margin-right: 21rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.notice_center {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
			}
		}




		.must {
			width: 710rpx;
			margin: 0 auto;

			.title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;

				.title_l {
					width: 158rpx;
					height: 67rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title_r {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #AAAAAA;
				}
			}

			.must_scroll {
				margin: 24rpx auto;
				white-space: nowrap;
				box-sizing: border-box;
				border-bottom: 1px solid #eee;

				.must_l {
					width: 210rpx;
					height: 340rpx;
					overflow: hidden;
					box-sizing: border-box;
					display: inline-block;
					margin: 10rpx 15rpx;

					.l_img {
						width: 210rpx;
						height: 210rpx;
						border-radius: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}

					.l_text {
						box-sizing: border-box;

						.l_text_t {
							color: #333333;
							font-size: 30rpx;
							word-wrap: break-word;
							text-overflow: ellipsis;
							overflow: hidden;
							line-height: 60rpx;
							font-weight: bold;
						}

						.l_text_c {
							width: 100%;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #AAAAAA;
							display: flex;
							align-items: center;
							flex-wrap: wrap;
						}
					}
				}
			}

		}

		.musts {
			width: 710rpx;
			margin: 0 auto;
			height: 102vh;

			.title {
				height: 67rpx;
				width: 100%;
				display: flex;
				box-sizing: border-box;

				.title_l {
					width: 158rpx;
					height: 67rpx;
					margin-right: 31rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title_r {
					margin-top: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					line-height: 50rpx;
					font-style: italic;
					position: relative;
					background: linear-gradient(0deg, #FEECDF 10%, transparent 40%);
					height: 40rpx;
				}
			}

			.content_tit {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				overflow-x: auto;
				position: sticky;
				top: 0%;
				z-index: 9;
				background-color: #fff;
				height: 100rpx;
				display: flex;
				align-items: center;

				.content_x {
					display: inline-block;
					height: 60rpx;
					background-color: #F5F5F5;
					border-radius: 30rpx;
					text-align: center;
					line-height: 60rpx;
					margin-right: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					padding: 0rpx 30rpx;
				}

				.active {
					display: inline-block;
					height: 60rpx;
					border-radius: 30rpx;
					text-align: center;
					line-height: 60rpx;
					margin-right: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					padding: 0rpx 30rpx;
					background-color: #FFF7F1;
					color: #FF7416;
					font-weight: bold;
				}
			}

			.flex_item {
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				position: relative;
				width: 100%;

				.imgs {
					width: 100%;
					height: 388rpx;
					border-radius: 20rpx;
				}

				.ads {
					position: absolute;
					bottom: 0%;
					width: 100%;
					height: 180rpx;
					background: linear-gradient(0deg, #100803 0%, rgba(16, 8, 3, 0.7) 31%, rgba(16, 8, 3, 0.4) 67%, rgba(16, 8, 3, 0) 100%);
					border-radius: 0rpx 0rpx 20rpx 20rpx;
					opacity: 0.9;
					display: flex;
					justify-content: space-between;
					padding: 30rpx;
					box-sizing: border-box;

					.tit {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #FFFFFF;
						max-width: 500rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.label_flex {
						display: flex;
						margin-top: 20rpx;

						.label {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							border: 1px solid #fff;
							padding: 10rpx;
							border-radius: 10rpx;
							margin-right: 20rpx;
							max-width: 200rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.btn {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
						background-color: #FF7416;
						line-height: 66rpx;
						height: 66rpx;
						border-radius: 33rpx;
						padding: 0 20rpx;
						margin-top: 60rpx;
					}

				}
			}

		}
	}
</style>